<template>
	<view class="e-flex e-flex-items-start">
		<view class="avatar e-flex">
			<e-avatar shape="circle" size="60rpx" mode="aspectFill" :src="$fullLink(info.customerHeaderImg)"
				:default-url="$staticPath('default-headerImg.png')">
			</e-avatar>

		</view>
		<view class="content e-flex-1">
			<view class="e-flex e-flex-between">
				<text>{{ info.customerNickName }}</text>
				<view class="e-flex">
					<view class="e-flex">
						<image class="img-32" v-for="items in Math.ceil(info.averageScore)" :key="items"
							:src="$staticPath('layout/basics/star.png')" />
					</view>
					<view class="e-flex">
						<image class="img-32" v-for="items in 5 - Math.ceil(info.averageScore)" :key="items"
							:src="$staticPath('layout/basics/star_default.png')" />
					</view>
				</view>
			</view>
			<view class="e-flex e-font-24 c-placeholder e-m-b-20">
				<view class="e-m-r-10">{{ info.createTime }}</view>
				<view>{{ info.skuSpec }}</view>
			</view>
			<view>
				{{ info.content }}
			</view>
			<view class="e-m-t-20" v-if="info.photos">
				<e-album :urls="photos" singleSize="99" multipleSize="180rpx"></e-album>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {computed} from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { GoodsEvaluateItem} from '@/common/request/api'
	
	const props = defineProps<{
		info:GoodsEvaluateItem
	}>()
	
	const ctx = useCurrentInstance()
	
	const photos = computed(() => {
		return  props.info.photos?.map(item => ctx.$fullLink(item))|| []
	})
</script>

<style lang="scss" scoped>
	.avatar {
		flex: 0 0 80rpx;
		align-items: flex-start;
	}
</style>